<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<%@ include file="discovery-css.jsp" %>
	</head>
<body class="no-skin">
	<div class="page-content">
	
			
			<ul class="nav nav-pills discovery-nav" role="tablist">
			 <li role="presentation" class="active"><a>写新文章</a></li>
			  <li role="presentation"><a href="${ctx}/discovery/article/listArticle.action?pageno=1&pagesize=25">文章管理</a></li>
			 
			</ul>
			<hr/>
		<div class="page-content-area">
			
			<div class="row">
				<div class="col-xs-12 col-sm-12 widget-container-col">
					<div class="widget-box widget-color-blue">
						<!-- #section:custom/widget-box.options.collapsed -->
						<div class="widget-body">
							<div class="widget-main" style="min-height:1336px;" >
								<div class="row" id="prices">
									<div class="col-xs-12 col-md-12">
									  <form id="discovery-add-form" name="" action="${ctx}/discovery/article/saveArticle.action?operate=${addorUpdateVO.operate}&id=${addorUpdateVO.dateVo.id}" method="post" enctype="multipart/form-data">
									    <div class="forpreview">
										  <div class="form-group autoTxtCount">
											<label for="title">标题</label>
											<input type="text" name="addorUpdateVO.dateVo.title" class="form-control text" id="title" value="${addorUpdateVO.dateVo.title}" required="required" maxlength="50">
											<span class="tips">50/50</span>
										  </div>
										  <div class="form-group discovery-inline mr10 autoTxtCount">
											<label for="author">作者名（选填）</label>
											<input type="text" name="addorUpdateVO.exVO.author" class="form-control discovery-input text" id="author" value="${addorUpdateVO.exVO.author}" maxlength="7">
											<span class="tips">7/7</span>
										  </div>
										  <div class="form-group discovery-inline discovery-inline-3row">
											<label for="head">作者头像</label>
											<input type="file" class="discovery-input-file" name="addorUpdateVO.icon" id="head"/>
										    <input type="hidden" id="headhid" value="${addorUpdateVO.exVO.icon}"/>
										  </div>
										  <div class="discovery-inline headimg">
										    <img id="previewhead" src="${addorUpdateVO.exVO.icon}" onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'"/>
										  </div><br>
										  <div class="form-group discovery-inline mr10 autoTxtCount">
											<label for="from">文章来源（必填）</label>
											<input type="text" name="addorUpdateVO.dateVo.source" class="form-control discovery-input text" id="from" value="${addorUpdateVO.dateVo.source}" maxlength="7">
											<span class="tips">7/7</span>
										  </div>
										  <div class="form-group discovery-inline autoTxtCount">
											<label for="fromurl">来源地址（选填）</label>
											<input type="text" name="addorUpdateVO.dateVo.sourceurl" class="form-control discovery-input text" id="fromurl" value="${addorUpdateVO.dateVo.sourceurl}"  maxlength="200">
											<span class="tips">200/200</span>
										  </div><br>
										  
										  <div class="form-group discovery-inline">
											<label for="promote">选择标签</label>
											<select id="tagSelect" class="form-control discovery-input" name="addorUpdateVO.dateVo.tag">
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 0}">selected="selected"</c:if> value="0" >无</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 1}">selected="selected"</c:if> value="1">原创</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 2}">selected="selected"</c:if> value="2">热门</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 3}">selected="selected"</c:if> value="3">推广</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 4}">selected="selected"</c:if> value="4">推荐</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 5}">selected="selected"</c:if> value="5">美图</option>
											   <option <c:if test="${addorUpdateVO.dateVo.tag == 6}">selected="selected"</c:if> value="6">置顶</option>
											</select>
										  </div>
										  <div class="form-group discovery-inline">
											<label for="promote">选择文章类型</label>
											<select id="tagSelect" class="form-control discovery-input" name="addorUpdateVO.dateVo.attrId">
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 0}">selected="selected"</c:if> value="0" >无</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 1}">selected="selected"</c:if> value="1">新车</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 2}">selected="selected"</c:if> value="2">二手车</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 3}">selected="selected"</c:if> value="3">养车</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 4}">selected="selected"</c:if> value="4">用车</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 5}">selected="selected"</c:if> value="5">趣味</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 6}">selected="selected"</c:if> value="6">新闻</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 7}">selected="selected"</c:if> value="7">政策改革</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 8}">selected="selected"</c:if> value="8">美图</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 9}">selected="selected"</c:if> value="9">值得买</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 10}">selected="selected"</c:if> value="10">违章</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 11}">selected="selected"</c:if> value="11">加油</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 12}">selected="selected"</c:if> value="12">车险</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 13}">selected="selected"</c:if> value="13">福利</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 14}">selected="selected"</c:if> value="14">色情</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 15}">selected="selected"</c:if> value="15">汽车装饰</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 16}">selected="selected"</c:if> value="16">汽车配件</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 17}">selected="selected"</c:if> value="17">开车技巧</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 18}">selected="selected"</c:if> value="18">咨询老司机（问答）</option>
											   <option <c:if test="${addorUpdateVO.dateVo.attrId == 19}">selected="selected"</c:if> value="19">其他</option>
											</select>
										  </div>
										  <br>
										  <div id="spreadLink" class="form-group discovery-inline">
										  	<label for="promote">推广链接</label>
											<input class="form-control discovery-input text" type="text" name="addorUpdateVO.dateVo.url" value="${addorUpdateVO.dateVo.url }"/>
										  </div>
										  <div id="spreadPosition" class="form-group discovery-inline">
										  	<label for="promote">推广位置</label>
											<input class="form-control discovery-input text" type="text" name="addorUpdateVO.dateVo.topindex" value="${addorUpdateVO.dateVo.topindex }"/>
										  </div>
										  <br>
										  <div id="spreadTitle" class="form-group discovery-inline">
										  	<label for="promote">推广标题</label>
											<input class="form-control discovery-input text" type="text" name="addorUpdateVO.dateVo.detailprice" value="${addorUpdateVO.dateVo.detailprice }"/>
										  </div>
										  <br>
										  <div class="form-group discovery-inline" >
											<label for="promote">样式</label>
											<select class="form-control discovery-input" name="style" id="style" >
											   <option <c:if test="${style == -1 }">selected="selected"</c:if> value="-1" >小图（默认）</option>
											   <option <c:if test="${style == 6 }">selected="selected"</c:if> value="6" >大图</option>
											   <option <c:if test="${style == 4 }">selected="selected"</c:if> value="4" >多图</option>
											</select>
										  </div>
										  
										  <div id="preview_area" class="form-group discovery-inline mr10 ">
												
										  </div>
										  
										  </div><!--forpreview end-->
										  
										  <div class="form-group autoTxtCount" style="width:900px;">
											<label for="summary">摘要</label>
											<textarea name="addorUpdateVO.exVO.summary" class="form-control discovery-input-summary text" id="summary" required="required" maxlength="200">${addorUpdateVO.exVO.summary}</textarea>
											<span class="tips">200/200</span>
										  </div>
 
										<textarea id="editor_id" name="addorUpdateVO.exVO.html"  style="width:900px;height:500px;">
										${addorUpdateVO.exVO.html}
										</textarea>

										<div class="form-group discovery-inline mr10" style="width:900px">
											<label for="shareurl">分享链接</label>
											<input type="text" name="addorUpdateVO.dateVo.shareurl" class="form-control discovery-input text" id="shareurl" value="${addorUpdateVO.dateVo.shareurl}">
										  </div>

										<div class="form-opera">
										 <div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
											<label class="col-sm-4 control-label"  style="text-align:right"  for="sex">发布时间（不填立即发布）:</label>
											<div class="col-sm-8">
												<div class="input-daterange input-group">
													<input id="pubtime" type="text" data-date-format="yyyy-mm-dd hh:ii" class="date-picker input-sm form-control" style="padding-left:0px" value="${addorUpdateVO.pubTime}" name="addorUpdateVO.pubTime">
												</div>
											</div>
										 </div>
											<button type="button" class="btn btn-primary savepost">保存</button>
											<button type="button" class="btn btn-default savedraft" style="display:${display};margin-right:3px;">保存为素材</button>
										 </div>
										 
									  </form>
									</div>
								</div>

									
							</div><!-- /.widget-main -->
						</div><!-- /.widget-body -->
					</div><!-- /.widget-box -->
				</div><!-- /.col-sm-12 -->
			</div><!-- /.row -->        		
		
		
		</div><!-- /.page-content-area -->	
	</div><!-- /.page-content -->

	<div id="tocopydiv" sclass="thumbnailcompnent" style="display:none;">
		<img src="" onerror="javascript:this.src='http://img.xmiles.cn/img/void.png'" style= "max-height:90px;"  required="required"/>
		<input type="file" style="display: none;"  />
		<input type="hidden" />
	</div>	
	
<%@ include file="/common/common-js.jsp" %>
<%@ include file="maxlength.jsp" %>
<script>
var articleStyle = ${style };
var thumbnailcompnent = $("#tocopydiv");
var previewArea = $("#preview_area");
var thumbnailList = ${addorUpdateVO.exVO.thumbnail_array };

$(function() {
	  // console.log(articleStyle);
	  // console.log(thumbnailList[0]);
	  /**
	  
	  if (articleStyle == -1) {
		  changeStyleSingle(false);
	  } else if (articleStyle == 6) {
		  changeStyleSingle(true);
	  } else if (articleStyle == 4) {
		  changeStyleMultiple();
	  }
	  
	  bindImgComponent();
	  **/
	  
    //判断图片是否存在
	$('.savepost').click(function() {
		var firstThumbnail = $("[name='addorUpdateVO.thumbnailUrlList[0]']").val();
		var firstThumbnailFile = $("[name='addorUpdateVO.thumbnailFileList[0]']").val();
		if (firstThumbnail == "" && firstThumbnailFile == "") {
			alert("图片不能为空");
			return;
		}
		
		var source = $("[name='addorUpdateVO.dateVo.source']").val();
		if (source == "") {
			alert("文章来源不能为空");
			return;
		}
		
	    $(this).attr('type','submit');
	    $('#discovery-add-form').attr({action:ctx+'/discovery/daily/saveArticle.action?operate=1&id=${addorUpdateVO.dateVo.id}',target:'_self'});
	});
    
	$('.savedraft').click(function() {
	    $(this).attr('type','submit');
		$('#discovery-add-form').attr({action:ctx +'/discovery/daily/saveArticle.action?operate=0&id=${addorUpdateVO.dateVo.id}',target:'_self'});
	});
	
	$('#style').change(function() {
	    var style = $(this).val();
	    previewArea.children().remove();
	    // console.log(style);
		if (style == -1) {
			changeStyleSingle(false);
		} else if (style == 6) {
			changeStyleSingle(true);
		} else if (style == 4) {
			changeStyleMultiple();
		}
		bindImgComponent();
	});
	
	$("#tagSelect").change(function() {
		var tag = $(this).val();
		// 为推广时显示输入推广链接的input
		if (tag == 3) {
			$("#spreadLink").show();
			$("#spreadPosition").show();
			$("#spreadTitle").show();
		} else {
			$("#spreadLink").hide();
			$("#spreadPosition").hide();
			$("#spreadTitle").hide();
			$("[name='addorUpdateVO.dateVo.topindex']").attr("value", 0);
		}
	});
	
	$("#tagSelect").change();
	$('#style').change();
});

/**
 * 单图样式
 */
function changeStyleSingle(isBig) {
	var component = thumbnailcompnent.clone();
	var children = component.children();
	var imgELement = $(children[0]);
	var fileElement = $(children[1]);
	var inputElement = $(children[2]);
	
	var url = thumbnailList.length > 0 ? thumbnailList[0] : null;
	
	inputElement.attr("name", "addorUpdateVO.thumbnailUrlList[0]");
	fileElement.attr("name", "addorUpdateVO.thumbnailFileList[0]");
	component.attr("style", "display:inline");
	if (url != null) {
		imgELement.attr("src", url);
		inputElement.attr("value", url);
	}
	
	if (isBig) {
		imgELement.attr("style", "max-height:200px;");
	}
	previewArea.append(component);
}  

/**
 * 多图样式
 */
function changeStyleMultiple() {
	for (var i = 0; i < 3; i++) {
		var component = thumbnailcompnent.clone();
		var children = component.children();
		var imgELement = $(children[0]);
		var fileElement = $(children[1]);
		var inputElement = $(children[2]);
		
		var url = i < thumbnailList.length ? thumbnailList[i] : null;
		
		inputElement.attr("name", "addorUpdateVO.thumbnailUrlList[" + i + "]");
		fileElement.attr("name", "addorUpdateVO.thumbnailFileList[" + i + "]");
		component.attr("style", "display:inline");
		if (url != null) {
			imgELement.attr("src", url);
			inputElement.attr("value", url);
		}
		
		previewArea.append(component);	
	}
}

function bindImgComponent() {
	  $("[sclass='thumbnailcompnent']").each(function() {
			
		  var allChildren = $(this).children();
		  var img = $(allChildren[0]);
		  var imgFile = $(allChildren[1]);
		  // console.log(img);
		  // console.log(imgFile);
		  
		  img.click(function() {
			  $(this).next().click();
		  });
		  
		  imgFile.change(function() {
				var file = this.files[0];
				var r = new FileReader();
				r.readAsDataURL(file);
				var that = $(this);
				$(r).load(function(){
					that.attr('value',this.result);
					that.prev().attr("src", this.result);
				});
		  });
	  });	
}
  
</script>
<script type="text/javascript">
$(function(){
	$('#head').change(function(){
		var file = this.files[0];
		var r = new FileReader();
		r.readAsDataURL(file);
		$(r).load(function(){
		$('#previewhead').attr('src',this.result);
		});
	});
});


	//时间控件
	jQuery(function($) {
		$(".date-picker").datetimepicker({autoclose:true}).next().on(ace.click_event, function(){
					$(this).prev().focus();
		});
	});

</script>
</body>
</html>
